@import '@common/styles/index.scss';
.rewards {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  background-color: $white;
  z-index: $zindex-popup;
  .line-box {
    display: flex;
    margin: 0 rem($margin-4n);
    height: 52px;
    font-size: $font-size-base;
    border-bottom: $border-solid-1;
    align-items: center;
    justify-content: space-between;
  }
  .label {
    color: $text-color-regular;
  }
  .item {
    display: flex;
    align-items: center;
    color: $text-color-primary;
    :global {
      .dzq-icon {
        transform: scale(.6);
        color: $icon-color;
      }
      .dzq-input {
        max-width: rem(200px);
        border: none;
      }
      .dzq-input__inner {
        border: none;
        text-align: right;
      }
    }
  }
  :global {

    .react-datepicker {
      // 整个盒子
      display: flex;
      height: 342px;
      font-size: $font-size-middle;
      border-radius: $border-radius-small;
      overflow: hidden;
      &__header,
      &-time__header {
        padding-top: 16px;
        font-size: $font-size-middle;
        border-radius: 0;
        border: $border-solid-1;
        background: $white;
      }
      &-time__header {
        padding-top: 0;
      }
      &__time-container {
        border-left: $border-solid-1;
      }
      &__current-month,
      &__day-name {
        font-size: $font-size-middle;
        color: $text-color-primary;
      }
      &__time-container,
      &__time-box {
        width: 90px;
      }
      &__time-list {
        @include scrollbar();
      }
      &__day--weekend,
      &__time-list-item,
      &__day {
        font-size: $font-size-base;
        color: $text-color-regular;
      }
      &__day--disabled {
        font-size: $font-size-base;
        color: $text-color-placeholder;
      }
      &__day--selected {
        color: $white;
        background-color: $primary-color;
        border-radius: $border-radius-small;
      }
      &__day--today {
        color: $white;
        background-color: $primary-color6;
        border-radius: $border-radius-small;
      }
      &__month {
        margin: $margin-4n;
      }
    }
    .react-datepicker__day-name,
    .react-datepicker__day,
    .react-datepicker__time-name {
      width: 24px !important;
      height: 24px !important;
      line-height: 24px !important;
      margin-left: 10px !important;
      margin-bottom: 8px !important;
      margin-top: 8px !important;
    }

    .react-datepicker__day:hover,
    .react-datepicker__month-text:hover,
    .react-datepicker__quarter-text:hover,
    .react-datepicker__year-text:hover,
    .react-datepicker__day--keyboard-selected {
      background-color: $primary-color;
      border-radius: $border-radius-small;
      color: $white;
    }
    .react-datepicker__day--disabled:hover {
      background-color: $white;
      color: $text-color-placeholder;
    }
    .react-datepicker__time-list {
      height: 280px !important;
    }
    .react-datepicker__time-list-item {
      height: 20px;
      display: flex;
      align-items: center;
    }
    .react-datepicker__time-list-item--selected {
      height: 20px;
      background-color: $primary-color !important;
    }

    .react-datepicker__navigation {
      border: $border-radius-big solid transparent;
      &--previous {
        border-right-color: $border-color;
      }
      &--next {
        border-left-color: $border-color;
      }
    }
    .react-datepicker__input-container {
      input {
        margin-right: 2px;
        max-width: rem(220px);
        border: 0;
        color: $text-color-primary;
        font-size: $font-size-base;
        cursor: pointer;
        text-align: right;
      }
    }
  }
  .btn {
    position: absolute;
    bottom: 0;
    display: flex;
    border-top: $border-solid-1;
    padding: rem($padding-2n) rem($padding-4n);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    :global {
      .dzq-button {
        flex:1;
        @include button-default;
        height: rem(42);
        &:first-child {
          margin-right: rem($margin-10);
        }
        &:last-child {
          @include button-primary;
        }
      }
    }
  }
}


.pc {
  z-index: $zindex-dialog !important;

  .rewards {
    position: static;
    width: 100%;
    height: 106px;
    min-height: 106px;
    .line-box:last-child {
      border-bottom: none;
    }
  }
}
